<template>

  <!-- <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div> -->

  

  <el-row class="tac">

    <el-col :span="4" class="left-menu">

      <el-menu :default-active="active" :default-openeds="['home','components']" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
        <el-menu-item index="home" @click="link('/')">
          <i class="el-icon-menu"></i>
          <template #title>首页</template>
        </el-menu-item>
        <el-menu-item index="plug-in" @click="link('/plug-in')">
          <i class="el-icon-s-grid"></i>
          <template #title>辅助工具</template>
        </el-menu-item>
        <el-submenu index="components">
          <template #title>
            <i class="el-icon-location"></i>
            <span>组件示例</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="css" @click="link('/css')">Css面向对象</el-menu-item>
            <el-menu-item index="row" @click="link('/row')">布局</el-menu-item>
            <el-menu-item index="directive" @click="link('/directive')">输入框指令</el-menu-item>
            <el-menu-item index="dropdown-button" @click="link('/dropdown-button')">下拉按钮</el-menu-item>
            <el-menu-item index="matrix" @click="link('/matrix')">矩阵布局</el-menu-item>
            <el-menu-item index="message" @click="link('/message')">消息提示</el-menu-item>
            <el-menu-item index="card" @click="link('/card')">普通面板</el-menu-item>
            <el-menu-item index="radio-and-checkbox" @click="link('/radio-and-checkbox')">单选与多选</el-menu-item>
            <el-menu-item index="dialog" @click="link('/dialog')">对话框</el-menu-item>
            <el-menu-item index="tabs" @click="link('/tabs')">选项卡</el-menu-item>
            <el-menu-item index="folding-panel" @click="link('/folding-panel')">折叠面板</el-menu-item>
            <el-menu-item index="panel-position" @click="link('/panel-position')">定位器</el-menu-item>
            <el-menu-item index="content-panel" @click="link('/content-panel')">容器面板</el-menu-item>
            <el-menu-item index="search-panel" @click="link('/search-panel')">搜索面板</el-menu-item>
            <el-menu-item index="tree-select" @click="link('/tree-select')">树形搜索</el-menu-item>
            <el-menu-item index="table" @click="link('/table')">表格</el-menu-item>
            <el-menu-item index="tree-table" @click="link('/tree-table')">树形表格</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <!-- <el-submenu index="2">
        <template #title>
          <i class="el-icon-location"></i>
          <span>页面模板</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="2-1" @click="link('/common-second-page-template')">通用二级页面模板</el-menu-item>
        </el-menu-item-group>
      </el-submenu> -->
        <!-- <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <template #title>导航二</template>
      </el-menu-item> -->
      </el-menu>
    </el-col>

    <el-col :span="20" class="main" v-waterMarker="{text:'Vue3.0组件库',textColor:'rgba(180, 180, 180, 0.4)'}">
      <router-view />
    </el-col>

  </el-row>

</template>

<script  lang="ts">
import { defineComponent,ref,onMounted,watch } from "vue";
  import { useRouter } from "vue-router";

 export default defineComponent({
    setup () {
      const {currentRoute,push} = useRouter();
      const link = (to) => {
        push(to);
      };

      const active=ref('home')
      function init() {
        const currentPath = currentRoute.value.fullPath.split('/')
        active.value=currentPath[1] ||  'home'
      }

    // onMounted(() => {
    //   init()
    // })

    watch(
      () => currentRoute.value,
      () => {
        init()
      }
    )

      return {
        link,
        active
      };
    },
    methods: {
      handleOpen (key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose (key, keyPath) {
        console.log(key, keyPath);
      },
    }
  })
</script>

<style lang="scss" scoped>
.left-menu {
  background: white;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
}
.left-menu::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 5px;
}

.left-menu::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 5px #e8eaee;
  box-shadow: inset 0 0 3px #e8eaee;
  background: #e8eaee;
}

.left-menu::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #ffffff;
}

.main {
  height: 100vh;
  padding: 20px;
  overflow-y: scroll;
}

.main::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 15px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 15px;
}

.main::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 8px;
  -webkit-box-shadow: inset 0 0 5px #e8eaee;
  box-shadow: inset 0 0 3px #e8eaee;
  background: #e8eaee;
}

.main::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #ffffff;
}
</style>


